import {useEffect, useState} from "react";
import EventBus from "../../envent_bus/event_bus";
import {NewAddressBackToSelectAddress} from "../../envent_bus/events";
import Taro from "@tarojs/taro";
import {request} from "../../utils/request";
import {Input, Text, View} from "@tarojs/components";
import styles from "../edit_address/edit_address.module.scss";
import {apis} from "../../constants/apis";

const EditAddress = () => {
  const [addressId, setAddressId] = useState();
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [address, setAddress] = useState<any>('');

  useEffect(() => {
    if (Taro.getCurrentInstance().router?.params) {
      const params: any = Taro.getCurrentInstance().router?.params;
      setName(params.name.trimRight())
      setPhone(params.phone);
      setAddress(params.address);
      setAddressId(params.id);
    }
    return () => {
      EventBus.fire(NewAddressBackToSelectAddress.eventName, new NewAddressBackToSelectAddress());
    }
  }, []);

  const getInputName = (e) => {
    setName(e.detail.value);
  }

  const getInputPhone = (e) => {
    setPhone(e.detail.value);
  }

  const getInputAddress = (e) => {
    setAddress(e.detail.value);
  }

  const isDisabled = () => {
    return !!(name && phone && address);
  }


  const updateAddressClick = () => {
    if (!isDisabled()) return;
    if (phone.length !== 11) {
      Taro.showToast({
        title: "手机号码格式错误",
        icon: 'error',
      })
      return;
    }
    request({
      url: apis.UPDATE_ADDRESS,
      data: {
        id: addressId,
        name: name,
        phone: phone,
        address: address,
      },
      method: "POST",
      pureData: false,
    }).then(res => {
      if (res.code === 200 && res.data) {
        Taro.navigateBack();
      }
    })
  }

  return (
    <View className={styles.add_body}>
      <View style={{marginTop: "40rpx", marginLeft: "38rpx"}} className="text-large text-bold">收货信息</View>
      <View className={styles.add_address_container}>

        <View className={styles.add_address_item}>
          <View className="color-third-text">收货人姓名</View>
          <Input maxlength={10} value={name} adjustPosition={false} style={{marginTop: "20rpx"}} type={"text"}
                 onInput={(e) => {
                   getInputName(e);
                 }} placeholder={"请输入收货人姓名"}/>
          <View style={{marginTop: "20rpx", width: "90vw"}} className="divide-1-dark"/>
        </View>

        <View style={{marginTop: "30rpx"}} className={styles.add_address_item}>
          <View className="color-third-text">收货人手机号码</View>
          <Input value={phone} adjustPosition={false} style={{marginTop: "20rpx"}} onInput={(e) => {
            getInputPhone(e)
          }} placeholder={"请输入收货人手机号码"}/>
          <View style={{marginTop: "20rpx", width: "90vw"}} className="divide-1-dark"/>
        </View>

        <View style={{marginTop: "30rpx"}} className={styles.add_address_item}>
          <View className="color-third-text">请输入地址</View>
          <Input value={address} adjustPosition={false} style={{marginTop: "20rpx"}} onInput={(e) => {
            getInputAddress(e)
          }} placeholder={"请输入收货地址"}/>

          <View style={{marginTop: "20rpx", width: "90vw"}} className="divide-1-dark"/>
        </View>

        <View style={{backgroundColor: isDisabled() ? '#FFB119' : '#DADADA'}} onClick={updateAddressClick}
              className={styles.confirm_btn}><Text>确定</Text></View>
      </View>
    </View>
  )
}
export default EditAddress;
